<template>
	<view class="hot-box" :style="{marginBottom:scrollTop>toHeight? '160rpx':'20rpx'}">
		<view class="hot-box-header">
			<view class="hotImg">
				<image :src="hotTitle" mode="aspectFill"></image>
			</view>
			<scroll-view class="scroll-view_H" scroll-x scroll-anchoring :scroll-with-animation='true'
				:scroll-left="scrollleft">
				<view class="scroll-view_H-wrap">
					<view class="scroll-view-item_H " v-for="(item,index) in list" :key="item.id"
						@click="getCategory(item.id,index)" :class="{'scroll-view-item_H-active':current == index}">

						{{item.name}}

						<view class="blsd" v-if="current == index">

						</view>
					</view>
				</view>
			</scroll-view>

		</view>
		<view class="hot-box-content">
			<scroll-view class="hot-box-content-scroll" scroll-x scroll-anchoring scroll-with-animation>
				<view class="hot-box-content-scroll-box">
					<view class="content-scroll-item" v-for="(item,index) in goodelist2" :key="item.id"
						@click="jump('/pages/goods/detail', { id: item.id  })">
						<view class="hot-goods-pic">
							<image class="no-icon"
								:src="header+'/uploads/20221207/ef589d5cad40d502c7539fe218ce1ae3.png'" mode="aspectFill"
								lazy-load v-if="index == 0"></image>
							<image class="no-icon"
								:src="header+'/uploads/20221207/e33d8ec00b19766f0de3079a79c5e2f4.png'" mode="aspectFill"
								lazy-load v-if="index == 1"></image>
							<image class="no-icon"
								:src="header+'/uploads/20221207/bae650765618b6ad6b5e198332ea4fb6.png'" mode="aspectFill"
								lazy-load v-if="index == 2"></image>
							<image v-if="item.image" :src="item.image" mode="aspectFill" lazy-load
								style="width: 100%;height: 100%;" @error="onError(goodsList,index)">
							</image>

							<!-- <image :src="defaultImage" mode="aspectFill" style="width: 100%;height: 100%;"></image> -->

						</view>
						<view class="hot-goods-title">
							<text>{{item.title}}</text>
						</view>
						<view class="hot-goods-price">
							<text style="font-size: 20rpx;font-weight: 400;">￥</text>
							{{item.price}}
							<text style="font-size: 20rpx;font-weight: 400;">/天</text>
						</view>
					</view>
					<view class="" v-if="!goodsList.length"
						style="width: 100%;height: 100%;display: flex;justify-content: center;">
						<image :src="$BASE_URL + emptyPic[0]" mode="aspectFill"
							style="width:260rpx;height:260rpx;margin: 0 auto;"></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import defaultImage from '@/imgs/zwt.jpg'
	export default {
		props: {
			hotTitle: {
				type: String,
				default: ''
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			emptyPic: {
				type: Array,
				default: () => {
					return []
				}
			},
			goodelist2: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				header: 'https://zuji.jiusuding.cn',
				current: 0,
				goodsList: [],
				scrollleft: 0,
				statusBar: 0,
				customBar: 0,
				hight: 0,
				defaultImage: defaultImage
			}
		},
		created() {
			// console.log('created');
		},
		onLoad() {
			console.log(12345);
		},
		onShow() {
			console.log(12345);

		},
		computed: {
			toHeight() {
				return this.hight - (parseFloat(this.customBar) + parseFloat(this.statusBar))
			}
		},
		mounted() {
			// this.getCategory(this.list[0].id, 0)
			// setTimeout(()=>{
			// 		this.getCategory(this.list[0].id, 0)
			// },1000)


			uni.getSystemInfo({
				success: (e) => {
					this.statusBar = e.statusBarHeight //状态栏
					this.customBar = e.statusBarHeight + e.titleBarHeight

				}
			})
			// #ifdef MP-ALIPAY
			const query = uni.createSelectorQuery()
			query
				.select('.sun-tab-box')
				.boundingClientRect((data) => {

					console.log(data);
					let pageScrollTop = Math.round(data.top)

					this.hight = pageScrollTop

				})
				.exec()

			// #endif

		},
		methods: {

			onError(goodsList, index) {
				this.goodsList[index].image = this.defaultImage
			},

			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			getCategory(id, index) {
				this.current = index
				// console.log(index);
				if (index == 2 || index == 3) {


					let num = setInterval(() => {
						if (this.scrollleft < 200) {
							this.scrollleft = this.scrollleft + 30
						} else {
							clearInterval(num)
						}
					}, 10)


				}
				if (index == 0 || index == 1) {

					let num = setInterval(() => {
						if (this.scrollleft >= 0) {
							this.scrollleft = this.scrollleft - 30
						} else {
							clearInterval(num)
						}
					}, 10)
				}

				this.$emit('getGoodslist', id)
				// this.$http('goods.lists', {
				// 	category_id: id,
				// 	keywords: '',
				// 	page: 1
				// }).then(res => {
				// 	if (res.code === 1) {
				// 		// console.log(res,'hot');
				// 		this.goodsList = res.data.data
				// 	}
				// });
			},
		}
	}
</script>

<style scoped lang="scss">
	.hot-box {
		width: 720rpx;
		height: 396rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		overflow: hidden;

		.hot-box-header {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(101deg, rgba(255, 204, 203, 0.88) -5%, #FDFDF8 102%, rgba(255, 252, 235, 0.14) 102%);
			display: flex;
			// padding: 20rpx 12rpx;
			// box-sizing: border-box;

			.scroll-view_H {
				width: 520rpx;
				height: 100%;
				white-space: nowrap;

				.scroll-view_H-wrap {
					width: 520rpx;
					height: 100%;
					padding: 0 20rpx;
				}

				.scroll-view-item_H {
					// width: 100rpx; 
					padding-top: 20rpx;
					height: 100%;
					margin: 0 20rpx;
					font-size: 26rpx;
					// height: 42rpx;
					color: #444;
					display: inline-block;

					.blsd {

						width: 40rpx;
						height: 8rpx;
						border-radius: 5rpx;
						background: linear-gradient(180deg, #FFCD00 0%, #FF8347 100%);
						margin: 0 auto;
						margin-top: 6rpx;
					}
				}

				.scroll-view-item_H-active {
					color: #FF4747;
					font-weight: 900;
				}
			}

			.hotImg {
				margin-top: 20rpx;
				margin-left: 12rpx;
				width: 200rpx;
				height: 42rpx;
				display: flex;
				align-items: center;
				border-right: 2rpx solid #9B9B9B;

				image {
					width: 180rpx;
					height: 42rpx;
				}
			}

		}

		.hot-box-content {
			height: 316rpx;
			width: 690rpx;
			padding: 24rpx 18rpx;
			box-sizing: border-box;

			.hot-box-content-scroll {
				height: 260rpx;
				width: 690rpx;
				box-sizing: border-box;
				white-space: nowrap;

				.hot-box-content-scroll-box {
					height: 260rpx;
					width: 100%;
					box-sizing: border-box;

					.content-scroll-item {
						display: inline-block;
						width: 160rpx;
						// height: 100%;

						margin-right: 36rpx;

						.hot-goods-pic {
							position: relative;
							width: 160rpx;
							height: 160rpx;
							background-color: #9B9B9B;
							text-align: center;

							.no-icon {
								width: 32rpx;
								height: 36rpx;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 99;
							}
						}

						.hot-goods-title {
							box-sizing: border-box;
							padding: 8rpx;
							width: 160rpx;
							height: 70rpx;
							font-size: 22rpx;
							text-align: center;

							text {
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden; //溢出内容隐藏
								text-overflow: ellipsis; //文本溢出部分用省略号表示
								display: -webkit-box; //特别显示模式
								-webkit-line-clamp: 2; //行数
								line-clamp: 2;
								-webkit-box-orient: vertical; //盒子中内容竖直排列
							}


						}

						.hot-goods-price {
							text-align: center;
							font-weight: 800;
							font-size: 28rpx;
							color: #FC514F;
						}
					}

				}


			}
		}
	}
</style>
